<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>课程档案查询</title>

    <!--表格-->
    <style>
        .el-table .warning-row {
            background: oldlace;
        }

        .el-table .success-row {
            background: #f0f9eb;
        }

        .el-header{
            background-color: #B3C0D1;
            color: #333;
            text-align: center;
            line-height: 60px;
            font-size: 30px;
        }

        .el-main {
            background-color: #E9EEF3;
            color: #333;
            text-align: left;
            line-height: 50px;
        }

        .el-footer{
            background-color: #B3C0D1;
            color: #333;
            text-align: center;
            line-height: 60px;

        }

    </style>
</head>
<body>
<div id="app">
    <el-container>
        <el-header><div>课程档案查询</div></el-header>
        <el-main>

            <!--搜索表单-->
            <el-form :inline="true" :model="course" class="demo-form-inline">
                <el-form-item label="课程名称">
                    <el-input v-model="course.name" placeholder="课程名称"></el-input>
                </el-form-item>

                <el-form-item label="考核方式">
                    <el-select v-model="course.type" placeholder="请选择类型">
                        <el-option label="必修" value="必修"></el-option>
                        <el-option label="任选" value="任选"></el-option>
                        <el-option label="限选" value="限选"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="onSubmit" icon="el-icon-search">查询</el-button>
                    <el-button type="danger" round @click="exit" icon="el-icon-s-home">退出系统</el-button>
                </el-form-item>

            </el-form>


            <!--按钮-->
            <el-row>
                <el-button type="info" plain @click="openFullScreen" icon="el-icon-refresh-left">刷新</el-button>
            </el-row><br>


            <!--表格-->
            <template>
                <el-table
                        :data="tableData"
                        style="width: 100%"
                        :row-class-name="tableRowClassName"
                        @selection-change="handleSelectionChange">
                    <el-table-column
                            type="selection">
                    </el-table-column>
                    <el-table-column
                            type="index">
                    </el-table-column>
                    <el-table-column
                            prop="courseID"
                            label="课程代号"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            prop="name"
                            label="课程名称"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            prop="type"
                            label="类别"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            prop="test"
                            label="考试"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            prop="credit"
                            label="学分"
                            align="center">
                    </el-table-column>

                    <el-table-column
                            prop="note"
                            label="备注"
                            align="center">
                    </el-table-column>

                </el-table>
            </template>

            <!-- 分页工具条-->
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[5, 10, 15, 20]"
                    :page-size="100"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="totalCount">
            </el-pagination>

        </el-main>
    </el-container>





</div>

<script src="js/vue.js"></script>
<script src="element-ui/lib/index.js"></script>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
<script src="js/axios-0.18.0.js"></script>

<script>
    new Vue({
        el: "#app",

        mounted() {
            this.selectAll();

        },

        methods: {

            //----------------分页查询数据---------------
            selectAll() {

                var _this = this;

                axios({
                    method: "post",
                    url: "http://localhost:8080/teaching/course/selectByPageAndCondition?currentPage=" + _this.currentPage + "&pageSize=" + _this.pageSize,
                    data: _this.course
                }).then(function (resp) {
                    _this.tableData = resp.data.rows;
                    _this.totalCount = resp.data.totalCount;
                })
            },

            //------------------表单查询方法-------------
            onSubmit() {
                // console.log(this.book);
                this.selectAll();
            },


            tableRowClassName({row, rowIndex}) {
                if (rowIndex === 1) {
                    return 'warning-row';
                } else if (rowIndex === 3) {
                    return 'success-row';
                }
                return '';
            },



            //----------------每页的条目数发送变化----------------
            handleSizeChange(val) {
                //console.log(`每页 ${val} 条`);
                //重新设置每页显示条数
                this.pageSize = val;
                this.selectAll();
            },

            //---------------页码发送变化查询的条数--------------
            handleCurrentChange(val) {
                //console.log(`当前页: ${val}`);
                //重新设置当前页码
                this.currentPage = val;
                this.selectAll();
            },


            //退出系统
            exit(){
                window.open('http://localhost:8080/teaching/login.jsp','_blank')
            },

            //刷新
            openFullScreen() {
                const loading = this.$loading({
                    lock: true,
                    text: 'Loading',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                });
                setTimeout(() => {
                    loading.close();
                    location.reload();
                }, 1000);
            }
        },

        data() {
            return {
                //每页显示的条数
                pageSize: 5,

                //总记录数
                totalCount: 100,

                //分页工具条的当前页码
                currentPage: 1,

                //添加对话框是否展示的标记
                dialogVisible: false,

                //修改的对话框
                showDialog: false,

                //书籍的数据
                course: {
                    courseID: '',
                    name: '',
                    type: '',
                    test: '',
                    credit: '',
                    note: '',
                },

                //复选框选中数据的集合
                multipleSelection: [],

                //被选中的id数组
                selectedIds: [],

                //表格数据
                tableData: [{
                    courseID: '00000',
                    name: '英语',
                    type: '必修',
                    test: '考试',
                    credit: '3',
                    note: '',
                }, {
                    courseID: '00000',
                    name: '英语',
                    type: '必修',
                    test: '考试',
                    credit: '3',
                    note: '',
                }, {
                    courseID: '00000',
                    name: '英语',
                    type: '必修',
                    test: '考试',
                    credit: '3',
                    note: '',
                }, {
                    courseID: '00000',
                    name: '英语',
                    type: '必修',
                    test: '考试',
                    credit: '3',
                    note: '',
                }]
            }
        }
    })


</script>

</body>
</html>